
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>vuetable</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="dataps-css/bootstrap.css">
    <link rel="stylesheet" href="dataps-css/font-awesome.css" />
		<link rel="stylesheet" href="dataps-css/sweetalert.css">
		<link rel="stylesheet" href="dataps-css/dacp-css-for-dataps.css" />
		<link rel="stylesheet" href="dataps-css/dataps-css.css" />
		<link rel="stylesheet" href="dataps-css/vuetable.css" />
		<link rel="stylesheet" href="dataps-css/myExample.css" />
  </head>

  <body>
  	<template id="detailRowTemplate">
  		<div class="detail-row form" @click="onClick($event)">
        <div class="inline">
            <label>Name: </label>
            <span>{{rowData.name}}</span>
        </div>
        <div class="inline">
            <label>Email: </label>
            <span>{{rowData.email}}</span>
        </div>
      </div>
  	</template>
  	<template id="customActionTemplate">
  		<div>
        <a class="dacp-color-success" href="#" @click.stop="itemAction('view-item', rowData)"><span class="glyphicon glyphicon-zoom-in">&nbsp;</span></a>
        <a class="dacp-color-hilight" href="#" @click.stop="itemAction('edit-item', rowData)"><span class="glyphicon glyphicon-pencil">&nbsp;</span></a>
        <a class="dacp-color-warning" href="#" @click.stop="itemAction('delete-item', rowData)"><span class="glyphicon glyphicon-remove">&nbsp;</span></a>
    	</div>
  	</template>
  	
  	
    <div id="app" class="container">
      <!-- Example row of columns -->
        <h2 class="sub-header">用户列表</h2>
        <hr>
        <div class="row">
            <div class="col-md-7 form-inline">
                <div class="form-inline form-group">
                    <label>搜索:</label>
                    <div class="dacp-input dacp-input-notice">
	                    <input v-model="searchFor" @keyup.enter="setFilter">
			    					</div>
                    <button class="btn btn-sm dacp-btn-blue" @click="setFilter">搜索</button>
                    <button class="btn btn-sm dacp-btn-red" @click="resetFilter">重置</button>
                </div>
            </div>
            <div class="col-md-5">
                <div class="form-inline form-group pull-right">
                		<button class="btn btn-sm dacp-btn-green" data-toggle="modal" data-target="#addRowModal">
                        <span class="glyphicon glyphicon-plus"></span> 添加
                    </button>
                    <button class="btn btn-sm dacp-btn-white" data-toggle="modal" data-target="#settingsModal">
                        <span class="glyphicon glyphicon-cog"></span> 表格设置
                    </button>
                </div>
            </div>
        </div>
        <div class="modal fade" id="settingsModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">设置</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" v-model="multiSort"> 多列排序 (按住Alt键点击列标题)
                                </label>
                            </div>
                        </div>
                        <!--<div class="form-group">
                            <label>Pagination:</label>
                            <select class="form-control" v-model="paginationComponent">
                                <option value="vuetable-pagination">vuetable-pagination</option>
                                <option value="vuetable-pagination-dropdown">vuetable-pagination-dropdown</option>
                                <option value="vuetable-pagination-dps">vuetable-pagination-dps</option>
                            </select>
                        </div>-->
                        <div class="form-group">
                            <label>每页展示数量:</label>
                            <select class="form-control" v-model="perPage">
                                <option value=10>10</option>
                                <option value=15>15</option>
                                <option value=20>20</option>
                                <option value=25>25</option>
                                <option value=50>50</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 class="panel-title">可见的字段</h4>
                                </div>
                                <div class="panel-body">
                                    <div class="checkbox" v-for="field in fields">
                                        <label>
                                            <input type="checkbox" v-model="field.visible">
                                            {{ field.title == '' ? field.name.replace('__', '') : field.title | capitalize }}
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="modal fade" id="addRowModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title">添加</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group" v-for="field in fields" v-if="field.name && field.title">
                            <label>{{field.title}}</label>
                            <input class="form-control" type="{{field.type}}" v-if="field.type !== 'radio' && field.type !== 'checkbox'" />
                            <div class="form-control" v-else>
                            	<template v-for="item in field.items">
                            		<input type="{{field.type}}" name="{{item.name}}"  value="{{item.value}}"/>
                            		<label>{{item.label}}</label>
                            	</template>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                    		<button type="button" class="btn btn-sm dacp-btn-blue" data-dismiss="modal">保存</button>
                        <button type="button" class="btn btn-sm dacp-btn-white" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="table-wrapper">
        	<vuetable v-ref:vuetable
	            api-url="http://vuetable.ratiw.net/api/users"
	            pagination-path=""
	            :fields="fields"
	            :sort-order="sortOrder"
	            :multi-sort="multiSort" 
	            table-class="table table-bordered table-hover"
	            pagination-class="vuetable-pagination-dps clearfix"
	            pagination-info-class="vuetable-pagination-dps-info"
	            pagination-component-class="vuetable-pagination-dps-component"
	            :pagination-component="paginationComponent"
	            :item-actions="itemActions"
	            :append-params="moreParams"
	            :per-page="perPage"
	            wrapper-class="dacp-table"
	            table-wrapper=".dacp-table"
	            loading-class="loading"
	            detail-row-component="my-detail-row"
	            detail-row-id="id"
	            detail-row-transition="expand"
	            row-class-callback="rowClassCB"
	        ></vuetable>
        </div>
    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
		<script src="dataps-js/jquery-3.1.0.js"></script>
		<script src="dataps-js/bootstrap.js"></script>
		<script src="dataps-js/moment-with-locales.min.js"></script>
		<script src="dataps-js/sweetalert.min.js"></script>
		<script src="dataps-js/vue.js"></script>
		<script src="dataps-js/vue-resource.js"></script>
		<script src="dataps-js/vue-table.js"></script>
		<script src="dataps-js/myExample.js"></script>
  </body>
</html>
